/*
 * @Author: restart 2425792130@qq.com
 * @Date: 2024-08-30 13:45:10
 * @LastEditors: restart 2425792130@qq.com
 * @LastEditTime: 2024-09-02 17:43:21
 * @FilePath: \react\src\pages\Home\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// import React from'react';
// // import ReactDOM from'react-dom';

// const Home = () => {
//     return (
//         <div>
//             <h1>Hello Home</h1>
//         </div>
//     );
// };

// export default Home;


// /*
//  * @Author: restart 2425792130@qq.com
//  * @Date: 2024-06-18 09:54:22
//  * @LastEditors: restart 2425792130@qq.com
//  * @LastEditTime: 2024-09-02 10:57:12
//  * @FilePath: \react-basic\src\App.js
//  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
//  */
import React, { useState } from 'react';
import { Button, Flex, Table } from 'antd';
import { useNavigate } from 'react-router-dom';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
const dataSource = Array.from({
  length: 46,
}).map((_, i) => ({
  key: i,
  name: `Edward King ${i}`,
  age: 32,
  address: `London, Park Lane no. ${i}`,
}));
const App = () => {
  const navigate = useNavigate()
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);
  const start = () => {
    // setLoading(true);
    // // ajax request after empty completing
    // setTimeout(() => {
    //   setSelectedRowKeys([]);
    //   setLoading(false);
    // }, 1000);
    const queryParams = selectedRowKeys.map((item, index) => `${index}=${item}`).join('&');
    navigate(`/about?${queryParams}`);
    console.log(selectedRowKeys,'selectedRowKeys',queryParams,'queryParams')
  };
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <Flex gap="middle" vertical>
      <Flex align="center" gap="middle">
        <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
          Reload
        </Button>
        {hasSelected ? `Selected ${selectedRowKeys.length} items` : null}
      </Flex>
      <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
    </Flex>
  );
};
export default App;